<template>
    <div>
        <div>
            <el-input v-model="params.userName" style="width: 200px;" placeholder="请输入姓名"></el-input>
            <el-input v-model="params.phone" style="width: 200px ; margin-left:10px;" placeholder="请输入电话"></el-input>
            <el-button type="warning" style="margin-left: 10px;" @click="findBySearch()">查询</el-button>
            <el-button type="warning" style="margin-left: 10px;" @click="rest()">清空</el-button>
            <el-button type="warning" style="margin-left: 10px;" @click="add()">新增</el-button>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="userName" label="姓名"></el-table-column>
                <el-table-column prop="nickName" label="昵称"></el-table-column>
                <el-table-column prop="neadSculpture" label="是否为管理员"></el-table-column>
                <el-table-column prop="phone" label="手机"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click = "editor(scope.row.userId)">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.userId)">
                            <el-button slot="reference" type="warning" style="margin-left: 5px;">删除</el-button>
                        </el-popconfirm>
                    </template>
                    
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange"
                :current-page="params.pageNum" 
                :page-sizes="[5, 10,15, 20]" 
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <div>
            <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="30%">
                <el-form :model="form">
                <el-form-item label="姓名" label-width="15%">
                    <el-input v-model="form.userName" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="15%">
                    <el-radio v-model="form.userSex" label="1">男</el-radio>
                    <el-radio v-model="form.userSex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="图书封面" label-width="20%">
                    <el-upload action="http://localhost:8080/api/files/upload" :on-success="successUpload">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="年龄" label-width="15%">
                    <el-input v-model="form.userAge" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="电话" label-width="15%">
                    <el-input v-model="form.phone" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="升级为管理员" label-width="15%">
                    <el-radio v-model="form.roleId" label="2C01305AF96C4556BCE7719AACC0DEC9">是</el-radio>
                    <el-radio v-model="form.roleId" label="2C01305AF96C4556BCE7719AACC0DEC7">否</el-radio>
                </el-form-item>
                <el-form-item label="升级为超管" label-width="15%" v-if="user.roleId='2C01305AF96C4556BCE7719AACC0DEC6'">
                    <el-radio v-model="form.roleId" label="2C01305AF96C4556BCE7719AACC0DEC6">是</el-radio>
                    <el-radio v-model="form.roleId" label="2C01305AF96C4556BCE7719AACC0DEC7">否</el-radio>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>

import request from "@/utils/request"
import { Message } from "element-ui";

export default {
    name: "UserView",
    data() {
        return {
            params: {
                pageNum: 1,
                pageSize: 5,
                userName: '',
                phone: '',
                status:"3"
            },
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            tableData: [],
            total: 0,
            dialogFormVisible :false,
            form:{

            },
        }
    },
    //进入页面时调用
    created() {
        this.load();
    },

    //各种方法
    methods: {
        load() {
            this.findBySearch();
        },
        findBySearch() {
            this.params.roleId = '2C01305AF96C4556BCE7719AACC0DEC7';
            request.get("/admin/findBySearch", {
                params: this.params
            }).then(res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.total=res.data.total
                }
                else{
                    this.$message.error(res.msg)
                }
            })
        },
        add(){
            this.form = {};
            this.dialogFormVisible = true
        },
        editor(userId){
            request.get("/admin/findById/"+ userId).then(res =>{
                if(res.code === 1){
                    
                    this.form = res.data
                }else{
                    this.$message ({
                        message:res.msg,
                        type:"success"
                    });
                };
                this.dialogFormVisible = true;
                this.findBySearch();
            })
        },
        del(userId){
            request.post("/admin/delete/"+ userId).then(res =>{
                if(res.code === 1){
                    this.$message ({
                        message:"删除成功",
                        type:"success"
                    })
                    this.findBySearch();
                }else{
                    this.$message ({
                        message:res.msg,
                        type:"error"
                    });
                };
                
            })
        },
        submit(){
            request.post("/admin/add" ,this.form).then(res=>{
                if(res.code === 1){
                    this.$message ({
                        message:"操作成功",
                        type:"success"
                    });
                    this.dialogFormVisible = false;
                    this.findBySearch();
                }else{
                    this.$message ({
                        message:res.msg,
                        type:"error"
                    });
                }
            })
        },

        rest() {
            this.params = {
                pageNum: 1,
                pageSize: 5,
                userName: '',
                phone: '',
            }
            this.findBySearch()
           
        },
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize
            this.findBySearch();
        },
        handleCurrentChange(pageNum) {
            this.params.pageNum = pageNum;
            this.findBySearch();
        },
        successUpload(res) {
            this.form.userIcon = res.data;
        },

    }
}
</script>  